<!--
 * @Author: sunli
 * @Date: 2021-12-27 23:02:43
 * @LastEditTime: 2024-11-19 09:55:16
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/calendar/demo.vue
-->
<script setup>
import {Calendar} from '../../../packages/lib/index-es';
import {ref, watch} from 'vue'

const visible_1 = ref('2024-4-26')
const visible_1_ref = ref()

const visible_2 = ref(['2023-03-20', '2023-03-30'])
const visible_2_ref = ref()


const visible_3 = ref(['2023-04-01', '2023-04-30'])
const visible_3_ref = ref()

const defaults = () => {
  visible_1_ref.value.show()
}
const more = () => {
  visible_2_ref.value.show()
}
const range = () => {
  visible_3_ref.value.show()
}
const change = (value) => {
  console.log(value)
}
watch(visible_1, (value) => {
  console.log(value, 1)
})
watch(visible_2, (value) => {
  console.log(value, 1)
})
watch(visible_3, (value) => {
  console.log(value, 1)
})
</script>

<template>
  <div>
    <button @click="defaults">单个日期</button>
    <button @click="more">多选日期</button>
    <button @click="range">区间日期</button>
    <Calendar style="height: 200px" ref="visible_1_ref" v-model="visible_1" type="single">
    </Calendar>
    <Calendar ref="visible_2_ref" v-model="visible_2" type="multiple">
    </Calendar>
    <Calendar ref="visible_3_ref" v-model="visible_3" type="range" :formatter="{start: '入店', end: '离店'}">
    </Calendar>
  </div>
</template>

<style>
</style>
